<template>
	<view class="products" :data-theme="theme">
		<view class="bg_color" style="padding: 24rpx 24rpx;">
			<u-search v-model="keyword" @custom="searchProduct" @search="searchProduct" placeholder="请输入退租申请单号"
				actionText="搜索" :actionStyle="{color:'#FFF'}" shape="square" style="flex: none;"></u-search>
		</view>
		<!-- 物资状态 -->
		<!-- <tab-bar style="background-color: #FFF;" :tabList="tabList" :tabIndex.sync="currentIndex"></tab-bar> -->
		<!-- 商品审核，筛选 -->
		<view style="background-color: #fff;">
			<view style="display: flex; justify-content: center;height: 40px;line-height: 40px;text-align: center;">
				<picker model="selector" @change="operateConfirm" range-key="name" :value="timeTypesIndex"
					:range="operateData" @cancel="cancelPicker" style="display: flex;justify-content: center;flex: 1;">
					<view style="flex: 1;justify-content: center;display: flex;"
						:style="{color:timeTypeShow?bgColor:null}" @click="timeTypeShow = true">
						<view style="font-size: 14px;margin-right: 6rpx;">{{operatyCity?operatyCity:'管理城市'}}</view>
						<u-icon :name="timeTypeShow?'arrow-up-fill':'arrow-down-fill'" size="10"
							:color="timeTypeShow?bgColor:''"></u-icon>
					</view>
				</picker>
				<picker model="selector" @change="bindPickerChange" range-key="depotName" :value="depotDataIndex"
					:range="depotList" @cancel="cancelPicker" style="display: flex;justify-content: center;flex: 1;">
					<view style="display: flex;justify-content: center;flex: 1;"
						:style="{color:depotTypeShow?bgColor:null}" @click="depotTypeShow = true">
						<view style="font-size: 14px;margin-right: 6rpx;">{{depotName?depotName:'仓库名称'}}</view>
						<u-icon :name="depotTypeShow?'arrow-up-fill':'arrow-down-fill'" size="12"
							:color="depotTypeShow?bgColor:''"></u-icon>
					</view>
				</picker>
			</view>
		</view>
		<swiper class="tab-view" :duration="300" :current.sync="currentIndex">
			<!-- <swiper-item class="swiper-item" v-for="(tab, index) in tabList" :key="index" style="display: flex;"> -->
			<swiper-item class="swiper-item" style="display: flex;">
				<scroll-view scroll-y="true" :style="{ 'padding-bottom':'20rpx' }"
					style="height: 100%; overflow: hidden;" @scrolltolower="scrolltolowerFn">
					<appliceTermine class="swiper-page" :bgColor="bgColor" ref="pages" :applyData="applyData" :loadMoreStatus="loadMoreStatus"
						@returnMaterials="returnMaterials" @checkboxChange="checkboxChange" @isAllChecked="isAllCheck">
					</appliceTermine>
				</scroll-view>
			</swiper-item>
		</swiper>

		<view style="position: fixed;bottom: 0px;width: 100%;padding: 10px;background-color: #FFF;">
			<view style="display: flex;">
				<view style="flex: 1;align-items: center;display: flex; ">
					<view style="display: flex; font-size: 16px;line-height: 70rpx;align-items: center;">
						<checkbox-group @change="allSelectChange">
							<label class="uni-list-cell uni-list-cell-pd" style="display: flex;line-height: 34rpx;">
								<view>
									<checkbox :value="'1'" :checked="isAllChecked" />
								</view>
								<view>全选</view>
							</label>
						</checkbox-group>

						<!-- <view style="display: flex;margin-right: 20px;">
							<span>已选</span>
							<span style="margin-left: 10px;"
								v-if="tabList && tabList[currentIndex] && tabList[currentIndex].checkboxValue"
								:style="{color:bgColor}">{{tabList[currentIndex].checkboxValue.length ? tabList[currentIndex].checkboxValue.length : '0'}}</span>
						</view> -->
					</view>
				</view>
				<view style="flex: 1;">
					<button @click="toApplyAllService()" class="bg_color"
						style="font-weight: bold;border-radius: 10px;color: #FFF;padding: 20rpx;"
						:color="bgColor">申请退租</button>
				</view>
			</view>
		</view>

		<!-- -----组件----- -->
		<u-modal style="position: absolute;" :content="showInfoModalInfos[showInfoModalIndex]"
			:show="showInfoModalVision" showCancelButton buttonReverse @confirm="showInfoModalConfirm"
			@cancel="() => showInfoModalVision = false"></u-modal>
	</view>
</template>

<script>
	import {
		queryBusinessOperateCityApi
	} from '@/api/businessStatus.js';
	import appliceTermine from './components/applice-termine-page.vue';
	import tabBar from '../components/tab-bar.vue';
	import {
		businessQueryGoodsAndDepotApi,
		queryDepotInformationApi
	} from '@/api/goodsAndDepot.js';
	import {
		getApplyMaterialsAPi,
	} from '@/api/materials.js';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		components: {
			tabBar,
			appliceTermine
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				keyword: "", //搜索商品
				tabHeaderLoading: true,
				tabList: [],
				currentIndex: 0,
				applyForm: {
					size: 10,
					current: 1,
					auditStatus: 2, //2已通过，审核状态
					rentStatus: 1, //出借状态：1租借中，2归还中，3已归还，0未使用
				},
				applyData: [],

				showInfoModalVision: false, //多功能确认事件
				showInfoModalIndex: 0,
				showInfoModalInfos: [
					"该商品正在出售中，是否确认进行编辑？",
					"确定将该商品加入回收站吗？",
					"确认恢复商品吗？"
				],
				//-- 上下架选择
				addCheckData: {},
				addCheckboxList: [],
				showUpDatePopup: false,
				//---

				timeTypeShow: false, //上下架时间选择
				timeTypeColumns: [{
						label: '正序',
						id: 0
					},
					{
						label: '倒序',
						id: 1
					}
				],
				timeTypesIndex: 0,
				//----------仓库----------
				depotDataIndex: 0,
				depotList: [],
				depotDataIndex: 0,
				depotTypeShow: false, //选择仓库下拉框
				depotForm: {
					limit: 10,
					page: 1,
				}, // 查询仓库名称
				depotData: [], //仓库数据
				depotName: '',
				// ------------查询经营城市--------
				operateCityForm: {
					queryType: 0, //0-查询号主自己，1-查询所有,使用1时必须配合父级Id“0“
				},
				operateData: [],
				useId: '',
				operatyCity: '', //城市名称
				isAllChecked: false,
				loadMoreStatus:'noMore',
			};
		},
		onLoad() {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.getDepotList();
			this.getOperateCity();
			this.tabList = [{
					id: "tab11",
					// title: "审批中",
					name: "审批中",
					type: 1,
					count: 0,
				},
				{
					id: "tab12",
					// title: "待付款",
					name: "待付款",
					type: 2,
					count: 0,
				},
				{
					id: "tab13",
					// title: "待领取",
					name: "待领取",
					type: 3,
					count: 0,
				},
				{
					id: "tab14",
					// title: "已驳回",
					name: "已驳回",
					type: 4,
					count: 0,
				},
				{
					id: "tab15",
					// title: "已完成",
					name: "已完成",
					type: 5,
					count: 0,
				},
				{
					id: "tab16",
					// title: "已撤回",
					name: "已撤回",
					type: 6,
					count: 0,
				}
			];
			// this.getApplyedList();
		},
		created() {
			this.initData();
		},
		methods: {
			initData() {
				// 首次激活时被调用
				this.applyForm.current = 1;
				this.loadMoreStatus = 'more';
				//需要初始化商品列表数据，根据数据类型
				this.getApplyedList();
			},
			// 触底事件 onReachBottom 加载更多数据
			scrolltolowerFn() {
				if (this.loadMoreStatus != 'more') {
					return;
				}
				this.applyForm.current++;
				this.getApplyedList(true);
			},
			/** 获取申请的物资列表 */
			getApplyedList(isMerge) {
				let that = this;
				uni.showLoading({
					title:'加载中',
					mask:true
				});
				getApplyMaterialsAPi(this.applyForm).then(res => {
					let data = res.data;
					if(isMerge){
						that.$util.SplitArray(data.records,that.applyData);
					}else{
						that.applyData = data.records;
					}
					that.totalPage = data.pages;
					for (let ele of this.applyData) {
						ele.materialItemIds = JSON.parse(ele.materialItemIds)
					};
					if (data.pages == this.applyForm.current || data.pages == 0) {
						that.loadMoreStatus = 'noMore';
					}
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading();
					console.log("getApplyMaterialsAPi error", err)
				});
			},
			returnMaterials(item) {
				let dataValue = [];
				dataValue.push(item);
				this.goPage(`/pages/materials/applyAllService/index`,
					(res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('materialsInfo', {
							data: dataValue,
						})
					});
			},
			/** 批量设置退租 */
			toApplyAllService() {
				let dataValue = [];
				for (let j = 0; j < this.checkboxValue.length; j++) {
					// 遍历解析后的 materialItemIds
					// 查找匹配的 id
					let checkValue = this.checkboxValue[j];
					let foundItem = this.applyData.find(item2 => item2.id == checkValue);
					// // 如果找到匹配的项，则将 id 赋给第一个数组中的某个字段
					if (foundItem) {
						// 例如赋值给一个新的字段
						dataValue.push({
							...foundItem
						})
					}
				};
				this.goPage(`/pages/materials/applyAllService/index`,
					(res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('materialsInfo', {
							data: dataValue,
						})
					});
			},
			// 获取仓库 id
			getDepotList() {
				queryDepotInformationApi(this.depotForm).then((res) => {
					let depot = res.data.list
					let depotData = depot.map(obj => {
						const {
							createMemberName,
							depotAddress,
							depotTelephone,
							updatedMemberName,
							zoneId,
							...rest
						} = obj; //删除部分属性
						return rest
					}); //要删除的数据的数组
					let addDepotData = [{
						depotId: '',
						depotName: '全部'
					}];
					depotData.unshift(...addDepotData);
					this.depotData.push(depotData);
					this.depotList = depotData;
				})
			},
			bindPickerChange(e) {
				let i = e.detail.value;
				let list = this.depotList[i].depotId;
				this.depotName = this.depotList[i].depotName;
				this.depotTypeShow = false;
				console.log('e:', e.detail.value)
				// this.$refs.tab[this.tabCurrentIndex].invoiceTypeConfirm(list);
			},
			/*
			 *获取经营城市信息*/
			getOperateCity() {
				queryBusinessOperateCityApi(this.operateCityForm).then((res) => {
					let newDataList = [];
					// 使用 reduce 方法将所有的 sonVOList 组合成一个新数组
					let allSonVOLists = res.data.reduce((acc, current) => {
						return acc.concat(current.sonVOList);
					}, []);

					let addDepotData = [{
						useId: '',
						name: '全部'
					}];
					allSonVOLists.unshift(...addDepotData);
					// this.depotData.push(depotData);

					this.operateData = allSonVOLists;
				})
			},
			operateConfirm(e) {
				let i = e.detail.value;
				let list = this.operateData[i].uesId;
				this.operatyCity = this.operateData[i].name;
				this.timeTypeShow = false;
				console.log('e:', e.detail.value)
				// this.$refs.tab[this.tabCurrentIndex].invoiceTypeConfirm(list);
			},

			cancelPicker() {
				this.depotTypeShow = false;
				this.timeTypeShow = false;
			},
			
			isAllCheck(value) {
				this.isAllChecked = value;
			},

			//多选按钮事件
			allSelectChange(checkboxValue) {
				// let page = this.$refs.pages;
				if (checkboxValue.detail.value.length > 0) {
					this.$refs.pages.checkboxAllSelect();
				} else {
					this.$refs.pages.checkboxAllSelect(true);
				}
			},
			//多选
			checkboxChange(checkboxValue) {
				this.checkboxValue = checkboxValue;
				// this.updateAllSelectState();
			},

			

			goPage(url, success) {
				uni.navigateTo({
					url,
					success: success
				});
			},
		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-PLUS */
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
	}

	::v-deep .u-popup {
		flex: 0 !important;
	}

	.page {
		flex: 1;
	}

	/* #endif */
	.products {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		// background-color: #ffffff;
		/* #ifdef MP-ALIPAY || MP-BAIDU */
		height: 100vh;
		/* #endif */
	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	.tab-view {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.swiper-item {
		flex: 1;
		flex-direction: column;
	}

	.swiper-page {
		flex: 1;
		flex-direction: column;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.ensure {
		width: 100%;
		background-color: #fff;
		padding-bottom: 22rpx;
		padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		.title {
			font-size: 32rpx;
			color: #282828;
			text-align: center;
			margin: 38rpx 0 36rpx 0;
			position: relative;

			.iconfont {
				position: absolute;
				left: 30rpx;
				top: 0;
				font-size: 36rpx;
			}

			.iconfontRight {
				position: absolute;
				right: 30rpx;
				top: 0;
				font-size: 36rpx;
			}
		}

		.list {
			height: 750rpx;
			margin: 0 30rpx;
			overflow-x: hidden;
			overflow-y: auto;

			.item {
				margin-bottom: 52rpx;

				.pictrue {
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					margin-right: 30rpx;

					/deep/image,
					.easy-loadimage,
					image,
					uni-image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.text {
					width: 618rpx;
					color: #999999;
					font-size: 28rpx;

					.name {
						color: #333333;
						font-weight: bold;
						margin-bottom: 20rpx;
					}
				}
			}
		}

	}

	/deep/ .tui-drawer-container_bottom {
		border-radius: 16rpx 16rpx 0 0;
	}
</style>